{extends file="../home.html"}
{block name="title"}{$head_title}{/block}
{block name="css"}
<link rel="stylesheet" type="text/css" href="/Public/Css/front/front_css/sama_part2.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/refresh_load.css?version={$version}"/>
<style type="text/css">
	/*html,body{
		width: 100%;
		height: 100%;
	}*/
	#load_wrapper{
		margin-top: 0rem;
	}
	#pullUp{
	text-align: center;
  	line-height: 34px;
  	width: 50%;
  	margin: 0 auto;
}
.blur1 {    
    -webkit-filter: blur(0.5rem); /* Chrome, Opera */
       -moz-filter: blur(0.5rem);
        -ms-filter: blur(0.5rem);    
            filter: blur(0.5rem);    
}
#pullDown{
	width:2rem;
	height:2rem;
	background:url(/Public/Images/front/loading.gif) 0 0.5rem no-repeat;
	background-size:100% 2rem;
	margin:0 auto;
	padding-top:0.5rem;
}
.pullUpLabel{
	font-size: 13px;
  	color: #909090;
}
#pullUp .pullUpIcon  {
  border:#F00 0px solid;
  display: inline-block;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: -6px;
  width:20px; height:20px;
  background:url(/Public/Images/front/pull-icon@2x.png) 0 0 no-repeat;
  -webkit-background-size:20px 20px; background-size:20px 20px;
  -webkit-transition-property:-webkit-transform;
  -webkit-transition-duration:250ms;
}
#pullUp .pullUpIcon  {
  -webkit-transform:rotate(-180deg) translateZ(0);
}
#pullUp.flip .pullUpIcon {
  -webkit-transform:rotate(0deg) translateZ(0);
}
#pullUp.loading .pullUpIcon {
  -webkit-transform:rotate(0deg) translateZ(0);
  -webkit-transition-duration:0ms;
  -webkit-animation-name:loading;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
}	
	.tag {
	
    font-size: 0.5rem;
    color: #FFFFFF;
    line-height: 0.75rem;
    padding: 0 0.25rem;
    background: #FF6600;
    border-radius: 2px;
    display: inline-block;
}
.touxian{
	width: 90%;
	height: 0.75rem;
	position: absolute;
	top:8.0rem;
	left:5%;
	text-align: center;
}
.imgbox{
	padding-right: 3.2%;
}
.imgbox li{
	width: 29.75%;
	float: left;
	margin-right: 1.3%;
	margin-bottom: 1.3%;
	overflow: hidden;
	position: relative;
}
.imgbox li.blur img{
	filter: blur(6px);
  	-webkit-filter: blur(6px);
  
}
.imgbox li .mask{
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top:0;
	bottom: 0;
	z-index: 100;
	font-size: 0.7rem;
	color: #FFFFFF;
	text-align: center;
}
.imgbox li .mask .txt{
	position: absolute;
	top: 50%;
	left: 50%;
	width:100%;
	-webkit-transform: translateX(-50%) translateY(-50%);
}
.imgbox li:nth-child(3n){
	margin-right: 0;
}
.imgbox li img{
	width: 4.9rem;
	height: 4.8rem;
	border-radius: 0;
	display: block;
	margin:-5%-5%-5%-5%;
}
.toux{
	width: 4rem;
	height: 4rem;
	position: absolute;
	top:2.2rem;
	left:39.47%;

}
.others_personal_head{
	position: absolute;
	top:0;
	left: 0;
}
.icon_gender_man{
	position: absolute;
	top:3rem;
	left:65%;
}
.icon_gender_male{
	position: absolute;
	top:3rem;
	left:65%;
}
.other_info:before{
	content: '';
    position: absolute;
    top: -8%;
    left: -8%;
    right: -8%;
    bottom: -8%;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    /*z-index: 1;*/
    background-image: url('{$user_info.headimgurl}?imageMogr2/auto-orient/thumbnail/!200x200r/imageslim');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
     /*background-attachment: fixed; */
}
.other_info:after{
	content: '';
    position: absolute;
    top: -8%;
    left: -8%;
    right: -8%;
    bottom: -8%;
    background: rgba(0,0,0,.1);
}
</style>
{/block}
{block name="content"}
<div id="load_wrapper">
<div id="scroller">
	{if ($user_info.is_open || $is_me) && $new_post_list}
	<div id="pullDown">
		    <span class="pullDownIcon"></span>
		</div>
	{/if}
<div class="others_personal_head_box">
	<div style="width；100%;height:10.3rem;overflow:hidden;position: relative;" class="other_info">
		<!-- 背景图片，根据头像变化 -->
		<!-- <img class="blur1" src="{$user_info.headimgurl}?imageMogr2/auto-orient/imageslim" style="height:12.3rem;width:116%;margin:-1.0rem -8% -1rem -8%"> -->
	</div>
	<div class="return_icon_white go_back"></div>
	<div class="toux">
		<img class="others_personal_head" src="{$user_info.headimgurl}?imageMogr2/auto-orient/thumbnail/!200x200r/imageslim"><!--个人头像-->
		<!--男女标志-->
		<!-- <div class="icon_gender_man"></div> -->
		<div class="{if $user_info.sex == 1}icon_gender_man{elseif $user_info.sex == 2}icon_gender_male{/if}"></div>
	</div>
	<a href="/FrontIndex/message_center" class="native_go">
		<div class="others_info_icon">
			{if $is_read}<div class="point"></div>{/if}
		</div>
	</a>
	<p1>{$user_info.nickname}</p1><!--昵称-->
		{if $wear_title}
		<div class="touxian">
			{foreach from = $wear_title item = this}
			<i class="tag" style="background-color: {$this.title_color}">{$this.title_name}</i>
			{/foreach}
		</div>
		{else}
		<!--如果没有头衔-->
		 <div class="no_title"></div><p2 >尚未取得任何头衔</p2>
		{/if}

</div>

<div class="others_personal_info">
	<a href="/FrontUserCenter/user_concern/user_id/{$user_info.user_id}" class="native_go"><div class="attention">关注</div></a>
	<a href="/FrontUserCenter/user_fans/user_id/{$user_info.user_id}" class="native_go"><div class="fans">粉丝</div></a>
	{if !$is_hidden}
	<a href="/FrontUserCenter/others_channel/user_id/{$user_info.user_id}" class="native_go"><div class="channel">关注频道</div></a>
	{/if}
	<div class="attention_number">{$user_num.focus_num|default:0}</div>
	<div class="fans_number">{$user_num.fans_num|default:0}</div>
	{if !$is_hidden}
	<div class="channel_number">{$user_num.channel_num|default:0}</div>
	{/if}
</div>



	<!--没帖子时-->
	{if !$user_info.is_open && !$is_me}
	<div class="dynamic_box">
	<!--设置了动态不可见-->
		<img class="dynamic_icon" src="/Public/Images/front/front_img/icon_personal_dynamicinvisible@3x.png">
		<div class="dynamic_describe">他设置了动态不可见</div>
	</div>
	{else}
	{if !$new_post_list}
	<!--还没有任何动态-->
	<div class="dynamic_box">
		<img class="dynamic_icon" src="/Public/Images/front/front_img/icon_nodynamic_personal@3x.png">
		<div class="dynamic_describe">他还没有发表任何动态呢</div>
	</div>
	{else}
	<!--有帖子时-->
	<div class="his_post">他的帖子</div>
	<div class="post_list">
		{foreach from = $new_post_list item=v key=k}
		<div class="post_box">
			<div class="time_box" data-y_m_d="{$k}">
				<li class="date" >{$v[0].day}</li>
				<li class="month">{$v[0].month}</li>
			</div>
			{foreach from = $v item = this}
			<ul class="post_content " >
				<li class="channel_name">{$this.channel_name}</li>

				<a class="native_go" href="/FrontChannel/post_detail/post_id/{$this.post_id}">
				<li class="post_title">{$this.title}</li>
				<li class="post_brief">{$this.content}</li>

				<ul class="imgbox clearfix">
					{foreach from=$this.imgs item=img key=k}
					{if $k < 5}
					<li {if !$img.is_show}class="blur"{/if}>
					<img src="{$img.img}?imageView2/1/w/200/h/200/imageslim" alt="">
					</li>
					{else}
					<li {if !$img.is_show}class="blur"{/if}>
					<div class="mask">
						<div class="txt">包含共{$this.img_count}张图</div>
					</div>
					<img src="{$img.img}?imageView2/1/w/200/h/200/imageslim" alt="">
					</li>
					{/if}
					{/foreach}
				</ul>

				</a>
				<li class="look">查看</li><div class="look_number">{$this.clickdot}</div>
				<li class="comment">评论</li><div class="comment_number">{$this.comment_num}</div>
			</ul>
			<div style="width:100%;height:0.05rem;background:#efefef;clear:both"></div>
			{/foreach}

		</div>

		{/foreach}
	</div>
	<div id="pullUp" style="margin-bottom:2.5rem">
		<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载...</span>
	</div>
	{/if}
	{/if}
</div>
</div>

{if !$is_me}
<div class="attention_chat_box">
	<!--未关注按钮-->
	<div class="unattentioned" style="display:{if !$is_follow}block{else}none{/if}">
		<div class="icon_add"></div>
		<p>关注</p>
	</div>

	<!--已关注-->
	<div class="attentioned" style="display:{if $is_follow}block{else}none{/if}">
		<div class="icon_concerned"></div>
		<p>已关注</p>
	</div>

	<div class="line_mid"></div>

	<div class="chat" data-hx_id="{$user_info.hx_account}" data-firend_name="{$user_info.hx_nickname}">
		<div class="icon_chat"></div>
		<p>私聊</p>
	</div>
</div>


<!--关注弹窗-->
	<div class="PopupConcerned">
		<div class="done"></div>
		<p>关注已成功</p>
	</div>

	<div class="Popupcancel">
		<div class="done"></div>
		<p>已取消关注</p>
	</div>

	<!--失败弹框-->
	<!--<div class="Popupdefeat">
		<div class="defeat"></div>
		<p>操作失败</p>
	</div>-->
{/if}
{/block}
{block name="js"}

<script type="text/javascript" src="__PUBLIC__/Js/front/iscroll.js"></script>
<script type="text/javascript" src="__JS__/front/front_js/otherPersonalCenter.js"></script>

<script>
	var user_id = parseInt('{$user_info.user_id}')
	var is_click = false;
	var total = parseInt('{$total}')
	var firstRow = parseInt('{$firstRow}')
	var firend_headimg = '{$user_info.headimgurl}'
	var my_name = '{$my_info.nickname}'
	var my_headimg = '{$my_info.headimgurl}'
	var my_hx_id = '{$my_info.hx_account}'
</script>
{literal}
	<script type="text/javascript">
		//关注成功
		$('.attention_chat_box').on('click','.unattentioned',function(){
			follow(1);
		});
//		$('.others_personal_info').on('click','.attention',function(){
//			window.location.href ='/Index/his_concern'
//		});
//
//		$('.others_personal_info').on('click','.fans',function(){
//			window.location.href ='/Index/his_fans'
//		});
//
//		$('.others_personal_info').on('click','.channel',function(){
//			window.location.href ='/Index/his_concernChannel'
//		});
		
		
		function showPopUP_concerned(){
			$('.PopupConcerned').fadeIn(1500);
			console.log(0);
			$('.PopupConcerned').fadeOut(1500);
		}

		//取消关注．
		$('.attention_chat_box').on('click','.attentioned',function(){
			follow(2);
		});

		function showPopUP_unconcerned(){
			$('.Popupcancel').fadeIn(1500);
			console.log(9);
			$('.Popupcancel').fadeOut(1500);
			}

	function follow(type){
		if(is_click == true) return;
		is_click = true;
		//1关注，2取关
		$.ajax({
			url:'/Front/follow_user',
			type:'post',
			data:{user_id:user_id},
			success:function(r){
				if(type == 1){
					if(r.code == 1){
						$('.Popupdefeat').fadeIn(1500);
						$('.Popupdefeat').fadeOut(2000);
					}else{
						showPopUP_concerned();
						$('.unattentioned').hide();
						$('.attentioned').show();
						$('.Popupcancel').stop();
						native_listen('follow_user');
					}

				}else if(type == 2){
					if(r.code == 1){
						$('.Popupdefeat').fadeIn(1500);
						$('.Popupdefeat').fadeOut(2000);
					}else{
						showPopUP_unconcerned();
						$('.unattentioned').show();
						$('.attentioned').hide();
						$('.PopupConcerned').stop();
						native_listen('follow_user');
					}
				}
				setTimeout(function () {
					is_click = false;
				},2000)

			}
		})
	}


	//私聊
	$('.chat').on('click', function(){
{/literal}
		{if $check_chat == 1}
{literal}
		var hx_id = $(this).data('hx_id');
		var firend_name = $(this).data('firend_name');
		native_listen('user_chat',{
			hx_id:hx_id,
			firend_name:firend_name.toString(),
			firend_headimg:firend_headimg,
			my_name:my_name.toString(),
			my_headimg:my_headimg,
			my_hx_id:my_hx_id,
		})
{/literal}
		{elseif $check_chat == 2}
		tan_tishi('对方暂无私信权限');
		{elseif $check_chat == 3}
		tan_tishi('暂无私信权限');
		{/if}
{literal}
	})

	</script>
{/literal}
{/block}



